<template>
	<view>
		<view class="box flex">
			<view class="item1 cflex ">
				<view class="text">
					头像
				</view>
				<image :src="head_image" mode="" class="avater" @tap='chooseImage'></image>
				<image src="/static/dxy-image/you_1@2x.png" mode="" class="you1"></image>
			</view>
			<view class="item2 cflex">
				<view class="text">
					昵称
				</view>
				<input type="text" v-model="name" class="inputname" @input="inputName" />
				<image src="/static/dxy-image/you_1@2x.png" mode="" class="you"></image>
			</view>
			<view class="item2 cflex">
				<view class="text">
					手机号
				</view>
				<input type="text" placeholder="请输入手机号" v-model="phone" class="inputphone" @input="inputphone" />
				<image src="/static/dxy-image/you_1@2x.png" mode="" class="you"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	const COS = require('../../libs/cos-wx-sdk-v5')
	const config = require('../../libs/config')
	const cos = new COS({
		getAuthorization: function(params, callback) { //获取签名 必填参数
			// 方法二（适用于前端调试）
			let authorization = COS.getAuthorization({
				SecretId: config.SecretId,
				SecretKey: config.SecretKey,
				Method: params.Method,
				Key: params.Key
			});
			callback(authorization);
		}
	});
	export default {
		data() {
			return {
				head_image: "",
				name: '',
				phone: '',
				image: ''
			}
		},
		onLoad() {
			let that = this
			that.getUser()
		},
		methods: {
			getUser() {
				let that = this
				let token = uni.getStorageSync("token")
				console.log("token", token)
				ajax({
					url: 'user/getUser',
					data: {
						token: token
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						that.head_image = res.data.data.head_image
						that.phone = res.data.data.mobile
						that.name = res.data.data.name
						console.log("token", res.data)
					},
					error: function() {

					}
				});
			},
			inputphone(e) {
				let that = this
				let text = e.detail.value
				console.log(text)
				that.phone = text
				if (!/^1[34578]\d{9}$/.test(text)) {

				} else {
					that.editUser()
				}
			},
			inputName(e) {
				let that = this
				let text = e.detail.value
				console.log(text)
				that.name = text
				that.editUser()
			},
			chooseImage(e) {
				let that = this;

				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						uni.showToast({
							title: '正在上传',
							icon: 'loading',
							duration: 10000
						});
						let imageList = res.tempFilePaths
						for (let i = 0; i < imageList.length; i++) {
							let filePath = imageList[i]
							let Key = filePath.substr(filePath.lastIndexOf('/') + 1); // 这里指定上传的文件名
							cos.postObject({
								Bucket: config.Bucket,
								Region: config.Region,
								Key: Key,
								FilePath: filePath,
								onProgress: function(info) {
									// console.log(JSON.stringify(info));
								}
							}, function(err, data) {
								let Paths = 'https://' + config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + Key
								// console.log('Paths', Paths)
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								});
								//that.images.push(Paths)
								that.head_image = Paths
								that.editUser()
								// console.log('that.images', that.images)
							});

						}
					}
				})


			},
			editUser() {
				let that = this
				let token = uni.getStorageSync('token')
				let head_image = that.head_image
				let name = that.name
				let mobile = that.phone
				ajax({
					url: 'user/editUser',
					data: {
						token: token,
						mobile: mobile,
						head_image: head_image,
						name: name
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						console.log("token", res.data)
					},
					error: function() {

					}
				});

			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.box {
		background-color: #FFFFFF;
	}

	.item1 {
		height: 97rpx;
		width: 95%;
		margin: 0 auto;
		line-height: 97rpx;
		font-size: 28rpx;

	}

	.item2 {
		height: 60rpx;
		width: 95%;
		margin: 0 auto;
		border-top: 1px solid #F7F7F7;
		line-height: 60rpx;
		font-size: 28rpx;
	}

	.avater {
		width: 86rpx;
		height: 86rpx;
		border-radius: 10rpx;
		margin-left: 70%;
		margin-top: 6rpx;
	}

	.you1 {
		width: 12rpx;
		height: 20rpx;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}

	.you {
		width: 12rpx;
		height: 20rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.inputname {
		text-align: right;
		margin-left: 230rpx;
		margin-top: 5rpx;
	}

	.inputphone {
		text-align: right;
		margin-left: 200rpx;
		margin-top: 5rpx;
	}
</style>
